---
id: 61a4a7877da33a73a1c1723e
title: Schritt 57
challengeType: 0
dashedName: step-57
---

# --description--

Da nun die Farbinhalte bestimmt sind, wirst du verschiedene Rottöne auf jedes Farbargument in der `linear-gradient`-Funktion anwenden. Die Schatten am oberen und unteren Rand der Markierungen sind dunkler, während der in der Mitte heller sein wird, als ob ein Licht darüber scheint.

Aktualisiere für das erste Farbargument, das derzeit rein rot ist, die `rgb`-Funktion, so dass der Wert für Rot `122`, der Wert für Grün `74` und der Wert für Blau `14` entspricht.

# --hints--

Deine `.red`-CSS-Regel sollte eine `background`-Eigenschaft auf `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)` gesetzt haben.

```js
assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

--fcc-editable-region--
.red {
  background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
}
--fcc-editable-region--

.green {
  background-color: #007F00;
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

```
